<template>
	<div class="w100 h100 flex" style="background: #000">
		<div class="left flex-col p-t-26 p-l-10 p-b-10">
			<!-- 带班人员 -->
			<takePerson :list="takePersonList" class="m-b-10" style="max-height: 200px; min-height: 100px" :fileType="{ label: 'name', phone: 'phone' }" />

			<my-box class="m-b-10 f1 h0" title="煤炭产量">
				<template #right>
					<el-radio-group v-model="time" size="small">
						<el-radio-button label="week">近一周</el-radio-button>
						<el-radio-button label="month">近一月</el-radio-button>
					</el-radio-group>
				</template>
				<div class="f1 h0 flex-col violate">
					<!-- <div class="list p-l-10 p-r-10 b-r-2 flex m-between">
						<div class="list-item">
							<img src="@/assets/img/rd/arrowRight.png" alt="" />
							<span class="name m-l-10">李维</span>
						</div>
						<div class="list-item">
							<span class="name">187****6523</span>
							<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
						</div>
					</div> -->
					<div class="f1 h0">
						<my-echarts :options="options1"></my-echarts>
					</div>
				</div>
			</my-box>

			<my-box class="flex-col f1 h0" title="掘进进尺">
				<template #right>
					<el-radio-group v-model="time2" size="small">
						<el-radio-button label="week">近一周</el-radio-button>
						<el-radio-button label="month">近一月</el-radio-button>
					</el-radio-group>
				</template>
				<div class="f1 h0 flex-col violate">
					<!-- <div class="list p-l-10 p-r-10 b-r-2 flex m-between">
						<div class="list-item">
							<img src="@/assets/img/rd/arrowRight.png" alt="" />
							<span class="name m-l-10">李维</span>
						</div>
						<div class="list-item">
							<span class="name">187****6523</span>
							<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
						</div>
					</div> -->
					<div class="f1 h0">
						<my-echarts :options="options2"></my-echarts>
					</div>
				</div>
			</my-box>
		</div>

		<div class="middle f1 w0 flex-col p-t-26 p-l-10 p-r-10 p-b-10">
			<div class="f1 h0 m-b-10 position-relative">
				<img class="b-img" src="@/assets/img/MakeDecision/决策分析底图.png" alt="" />
				<div
					v-for="(item, i) in markList"
					:key="item.name"
					:class="[
						`mark${i}`,
						'flex-col m-center s-center mark',
						markData[item.key] == 100 ? 'bimg-4' : markData[item.key] < 70 ? 'bimg-2' : markData[item.key] < 90 ? 'bimg-1' : 'bimg-3'
					]"
				>
					<span class="val">{{ markData[item.key] }}</span>
					<span class="name">{{ item.name }}</span>
				</div>
				<div class="center juzhong_transform tc">
					<div class="val">{{ markData.average }}</div>
					<div class="name">生产总体态势</div>
				</div>
			</div>
			<my-box class="flex-col" title="生产总体情况趋势" style="height: 250px; z-index: 2">
				<template #right>
					<el-radio-group v-model="time3" size="small">
						<el-radio-button label="week">近一周</el-radio-button>
						<el-radio-button label="month">近一月</el-radio-button>
						<el-radio-button label="year">近一年</el-radio-button>
					</el-radio-group>
				</template>
				<my-echarts :options="options3"></my-echarts>
			</my-box>
		</div>

		<div class="right flex-col p-t-26 p-r-10 p-b-10">
			<my-box class="flex-col m-b-10" title="采掘接续">
				<div class="list p-l-10 p-r-10 b-r-2 flex m-between">
					<div class="list-item">
						<img src="@/assets/img/rd/arrowRight.png" alt="" />
						<span class="name m-l-10">本日值班领导：{{ excavationData.personName }}</span>
					</div>
					<div class="list-item">
						<span class="name">{{ excavationData.phone }}</span>
						<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
					</div>
				</div>
				<div class="flex p-t-15">
					<div v-for="item in excavation" :key="item.name" class="excavation f1 w0">
						<div class="flex">
							<img class="excavation-img" :src="getImgUrl(`MakeDecision/${item.img}`)" alt="" />
							<div class="flex-col m-between p-b-4 m-l-4">
								<div class="excavation-val">
									<span class="excavation-val-num">{{ excavationData[item.key] }}</span>
									月
								</div>
								<div class="excavation-name">{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
			</my-box>

			<my-box class="flex-col f1 h0 m-b-10" title="地质构造">
				<my-table
					:data="geologicalData"
					:columns="[
						{ prop: 'position', label: '位置' },
						{ prop: 'type', label: '类型' },
						{ prop: 'complexRate', label: '负复杂度' }
					]"
					size="small"
				>
				</my-table>
			</my-box>

			<my-box class="flex-col m-b-10" title="设备完好率">
				<div class="list p-l-10 p-r-10 b-r-2 flex m-between">
					<div class="list-item">
						<img src="@/assets/img/rd/arrowRight.png" alt="" />
						<span class="name m-l-10">值班领导：{{ intactDeviceData.personName }}</span>
					</div>
					<div class="list-item">
						<span class="name">{{ intactDeviceData.phone }}</span>
						<img class="m-l-15" style="vertical-align: middle" src="@/assets/img/rd/phone.png" alt="" />
					</div>
				</div>
				<div class="flex s-center p-y-4 m-t-10 good">
					<img class="good-img" :src="getImgUrl(`MakeDecision/设备完好.png`)" alt="" />
					<span class="m-x-4">设备完好</span>
					<div class="f1 w0 good-Progress">
						<div class="good-Progress-in" :style="{ width: `${intactDeviceData.percent}%` }" />
					</div>
					<span class="good-num m-l-4"> {{ intactDeviceData.percent }} %</span>
				</div>
			</my-box>

			<my-box class="flex-col f1 h0" title="大型设备异常情况">
				<my-table
					:data="alarmData"
					:columns="[
						{ prop: 'subsystemName', label: '子系统名' },
						{ prop: 'deviceName', label: '设备名称' },
						{ prop: 'msg', label: '异常内容' },
						{ prop: 'handleState', label: '是否解决' },
						{ prop: 'alarmTime', label: '日期' }
					]"
					size="small"
				>
				</my-table>
			</my-box>
		</div>
	</div>
</template>

<script setup name="/MakeDecision/secure">
import takePerson from '../components/takePerson.vue'
import {
	leadPersonInfo,
	coalYield,
	footage,
	productDiagnosis,
	diagnosisHistory,
	diggingContinue,
	geological,
	intactDevice,
	alarmInfo
} from '@a/make-decision-produce'

// 带班人员
let takePersonList = ref([])
leadPersonInfo().then((res) => {
	takePersonList.value = res.data
})

// 煤炭产量
let time = ref('week'),
	coalYieldData = ref({})

watchEffect(() => {
	coalYield({ scope: time.value }).then((res) => {
		coalYieldData.value = res.data
	})
})

const options1 = computed(() => {
	let seriesData = [],
		{ date, name, coalYield } = coalYieldData.value
	name?.forEach((item, i) => {
		seriesData.push({
			name: item,
			type: 'bar',
			barWidth: '20%',
			itemStyle: {
				normal: {
					barBorderRadius: [10, 10, 0, 0]
				}
			},
			data: coalYield[i]
		})
	})
	return EpitionsFn({
		grid: {
			top: 30
		},
		xAxis: {
			data: date
		},
		yAxis: {
			name: '吨'
		},
		series: seriesData
	})
})

// 掘进进尺
let time2 = ref('week'),
	tunnelling = ref({})

watchEffect(() => {
	footage({ scope: time2.value }).then((res) => {
		tunnelling.value = res.data
	})
})

const options2 = computed(() => {
	let seriesData = [],
		{ date, name, footage } = tunnelling.value
	name?.forEach((item, i) => {
		seriesData.push({
			name: item,
			type: 'bar',
			barWidth: '20%',
			itemStyle: {
				normal: {
					barBorderRadius: [10, 10, 0, 0]
				}
			},
			data: footage[i]
		})
	})
	return EpitionsFn({
		grid: {
			top: 30
		},
		xAxis: {
			data: date
		},
		yAxis: {
			name: '米'
		},
		series: seriesData
	})
})

// 生产总体态势
let markList = [
		{ key: 'yield', name: '原煤产量' },
		{ key: 'geology', name: '地质构造' },
		{ key: 'geology', name: '生产系统' },
		{ key: 'digging', name: '采掘接续' },
		{ key: 'footage', name: '掘进进尺' }
	],
	markData = ref({})
productDiagnosis().then((res) => {
	markData.value = res.data
})

// 安全态势总体趋势
let time3 = ref('week'),
	tendency = ref({})

watchEffect(() => {
	diagnosisHistory({ scope: time3.value }).then((res) => {
		tendency.value = res.data
	})
})

const options3 = computed(() => {
	let seriesData = [],
		{ modelType, grade, dateTime } = tendency.value

	modelType?.forEach((item, i) => {
		seriesData.push({
			name: item,
			data: grade[i],
			type: 'line',
			yAxisIndex: 0,
			symbol: 'circle',
			symbolSize: 7,
			barWidth: 14,
			splitNumber: 6,
			smooth: false,
			lineStyle: {
				width: 1
			}
		})
	})

	return EpitionsFn({
		grid: {
			top: 40
		},
		legend: Elegend,
		xAxis: {
			data: dateTime
		},
		yAxis: {
			name: '分'
		},
		series: seriesData
	})
})

// 采掘接续
let excavation = [
		{ key: 'exploit', name: '开拓煤量', img: '开拓煤量.png' },
		{ key: 'prepare', name: '准备煤量', img: '准备煤量.png' },
		{ key: 'collect', name: '回采煤量', img: '回采煤量.png' }
	],
	excavationData = ref({})

diggingContinue().then((res) => {
	excavationData.value = res.data
})

// 地质构造
let geologicalData = ref([])
geological().then((res) => {
	geologicalData.value = res.data
})

// 设备完整率
let intactDeviceData = ref({})
intactDevice().then((res) => {
	res.data.percent = res.data.percent * 100
	intactDeviceData.value = res.data
})

// 设备异常情况
let alarmData = ref([])
alarmInfo().then((res) => {
	alarmData.value = res.data || []
})
</script>

<style lang="scss" scoped>
//左侧样式
.left {
	position: relative;
	width: 380px;
	height: 100%;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	.point {
		color: rgb(130, 135, 144);
		font-size: 12px;
		span {
			display: inline-block;
			width: 5px;
			height: 5px;
			border: 3px solid;
			border-radius: 50%;
			margin-right: 2px;
		}
	}
	.violate {
		&-name {
			color: rgba(255, 255, 255, 0.5);
		}
		&-item {
			color: #deedff;
			font-size: 12px;
			padding: 2px 4px;
		}
	}
}

//带班人员
$height: 32px;
.list {
	height: $height;
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
	&-item {
		line-height: $height;
		.name {
			color: rgba(255, 255, 255, 0.6);
		}
		.warn {
			color: rgba(238, 90, 90, 1);
		}
	}

	& + .list {
		margin-top: 10px;
	}
}

//中间样式
.middle {
	.b-img {
		left: 50%;
		transform: translate(-50%, 0%);
		position: absolute;
		z-index: 0;
		height: 140%;
	}
	$width: 100px;
	.mark {
		.val {
			font-size: 24px;
		}
		.name {
			font-size: 14px;
		}
	}
	.mark0 {
		position: absolute;
		width: $width;
		height: $width;
		top: 50%;
		left: calc(20% - $width/2);
	}
	.mark1 {
		position: absolute;
		width: $width;
		height: $width;
		top: 20%;
		left: calc(30% - $width/2);
	}
	.mark2 {
		position: absolute;
		width: $width;
		height: $width;
		top: 5%;
		left: calc(50% - $width/2);
	}
	.mark3 {
		position: absolute;
		width: $width;
		height: $width;
		top: 20%;
		right: calc(30% - $width/2);
	}
	.mark4 {
		position: absolute;
		width: $width;
		height: $width;
		top: 50%;
		right: calc(20% - $width/2);
	}
	.bimg-1 {
		background: url('@/assets/img/MakeDecision/橙.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(255, 106, 106, 1);
		}
		.name {
			color: rgba(243, 161, 161, 1);
		}
	}
	.bimg-2 {
		background: url('@/assets/img/MakeDecision/红.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(255, 171, 0, 1);
		}
		.name {
			color: rgba(243, 187, 161, 1);
		}
	}
	.bimg-3 {
		background: url('@/assets/img/MakeDecision/蓝.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(0, 253, 255, 1);
		}
		.name {
			color: rgba(161, 215, 243, 1);
		}
	}
	.bimg-4 {
		background: url('@/assets/img/MakeDecision/绿.png') no-repeat;
		background-size: 100%;
		.val {
			color: rgba(7, 255, 131, 1);
		}
		.name {
			color: rgba(161, 243, 202, 1);
		}
	}
	.center {
		text-align: center;
		.val {
			color: #07ff83;
			text-shadow: 0px 0px 20px rgba(11, 255, 0, 0.4);
			font-size: 50px;
			font-weight: 900;
		}
		.name {
			background: linear-gradient(180deg, #ffffff 13%, #91f0ff 81%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0px 0px 20px rgba(0, 31, 64, 0.88);
			font-size: 24px;
		}
	}
}
//右侧样式
.right {
	position: relative;
	width: 400px;
	height: 100%;
	z-index: 2;
	height: 100%;
	$height: 32px;
	.excavation {
		&-img {
			width: 50px;
		}
		&-val {
			font-size: 10px;
			color: #d0f1fc;
			&-num {
				text-shadow: 0px 0px 6px #00a5ff;
				font-size: 20px;
			}
		}
		&-name {
			color: #a2b5c7;
		}
	}
	.good {
		&-img {
			width: 30px;
		}
		&-Progress {
			border-radius: 2px;
			height: 20px;
			background: linear-gradient(180deg, #325369 0%, #1a303f 53%, #152a3b 100%);
			&-in {
				border-radius: 2px;
				height: 100%;
				background: linear-gradient(0deg, #00aeff 3%, #00a7f5 50%, #00aeff 100%);
			}
		}
		&-num {
			color: #ffffff;
			text-shadow: 0px 1px 1px rgba(4, 18, 42, 0.6);
			font-weight: bold;
		}
	}
}
</style>
